<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id">
    <div slot="body">
      <vxe-form :ref="form.ref" :data="form.info" :rules="form.rules" title-align="right" title-width="80" title-colon>
        <vxe-form-item title="操作模块" :span="16">
          <template #default="{ data }">
            {{ data.title }} - {{ data.operation }}
          </template>
        </vxe-form-item>

        <vxe-form-item title="登录信息" :span="8">
          <template #default="{ data }">
            {{ data.account }} - {{ data.ip }} - {{ data.loginLocation }}
          </template>
        </vxe-form-item>

        <vxe-form-item title="请求方式" :span="16">
          <template #default="{ data }">
            {{ data.requestMethod }}
          </template>
        </vxe-form-item>

        <vxe-form-item title="请求地址" :span="8">
          <template #default="{ data }">
            {{ data.url }}
          </template>
        </vxe-form-item>

        <vxe-form-item title="操作方法" :span="16">
          <template #default="{ data }">
            {{ data.method }}
          </template>
        </vxe-form-item>
        <vxe-form-item title="日志等级" :span="8">
          <template #default="{ data }">
            <dict-tag :options="dictType.log_level" :value="data.level"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="操作时间" :span="16">
          <template #default="{ data }">
            {{ data.createTime }}
          </template>
        </vxe-form-item>
        <vxe-form-item title="消耗时间" :span="8">
          <template #default="{ data }">
            {{ data.costTime }}毫秒
          </template>
        </vxe-form-item>
        <vxe-form-item title="详细信息" :span="24">
          <template #default="{ data }">
            <json-viewer :value="JSON.parse(data.data)" :expand-depth="10" copyable boxed>
              <template v-slot:copy>
                复制
              </template>
            </json-viewer>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
  </zero-dialog>
</template>

<script>

export default {
  name: 'addUpdateForm',
  props: {
    dictType: {
      type: Object
    },
  },
  data() {
    return {
      dialog: {//弹框数据
        id: "addOrUpdateDialogId",
        fullscreen: false, // 弹框全屏
        open: false,//是否弹出表单
        title: '',//标题
        width: '1000px', //定义宽度，默认400px
      },
      form: {//表单数据
        ref: 'addOrUpdateFormRef', //ref属性
        info: {},//表单提交数据
      },
    }
  },
  created() {
    this.initDialog = function (params) {
      this.dialog.title = '操作日志详情'
      this.dialog.open = true
      this.form.info = params.row
    };
  }
}
</script>
